<template>
  <div class="music-platform">

    <main>
      <!--轮播图-->
      <section class="row">
        <section class="banner">
          <div class="banner-content">
            <el-carousel :interval="5000" type="card" height="500px">
              <el-carousel-item v-for="(image, index) in images" :key="index">
                <img :src="image" alt="Carousel Image" style="width: 100%; height: 100%; object-fit: cover;" />
              </el-carousel-item>
            </el-carousel>
          </div>
        </section>
      </section>




      <section class="music-notation">

        <!--文字展示-->
        <div class="notation-header">
          <h2>乐谱</h2>


          <el-button type="text" class="more-notations" @click="goToNotation()">
            <h4>
              >> 更多
            </h4>
          </el-button>

        </div>

        <!--下方卡片-->
        <div class="card-container" style="margin-top: 20px;">
          <div class="card" v-for="(notation,index) in notations" :key="notation.notation_id">
            <div class="card-image">
              <img :src="'http://localhost:8080/images/upload/'+notation.cover_image" alt="Notation image"
                class="notation-image" @click="goToNotationDetail(notation)" />
            </div>
            <div class="card-content">
              <h3>{{ notation.name }}</h3>
          
              <P class="authors">作曲：{{ notation.author_song }}</P>
                <el-button class="more-button" type="text" @click="goToNotationDetail(notation)">详情</el-button>
            </div>
          </div>
        </div>

      </section>




      <!--文字展示-->
      <section class="music-study">
        <div class="notation-header">
          <h2>乐理知识</h2>
          <el-button type="text" class="more-knowledges" @click="goToKnowledge()">
            <h4>
              >> 更多
            </h4>
          </el-button>
        </div>

        <!--下方卡片-->
        <div class="card-container" style="margin-top: 20px;">
          <div class="card" v-for="(detail, index) in details" :key="detail.theory_knowledge_id">
            <div class="card-image">
              <img :src="'http://localhost:8080/images/upload/'+detail.cover_image" alt="Theory Knowledge image"
                class="notation-image" @click="goToKnowledgeDetail(detail)" />
            </div>
            <div class="card-content">
              <h3>{{ detail.name }}</h3>
            </div>
          </div>
        </div>
      </section>

    </main>



  </div>
</template>  

<script>


  
export default {  
  data() {
    return {
      // 首页顶部轮播图图片数组
      images: [
        'http://localhost:8080/images/upload/首页轮播图1.png',
        'http://localhost:8080/images/upload/首页轮播图2.jpg',
        'http://localhost:8080/images/upload/首页轮播图3.png',
        'http://localhost:8080/images/upload/首页轮播图4.png',
        'http://localhost:8080/images/upload/首页轮播图5.png',
      ],
      notations:[],
      details:[],
    };
  },
  methods: {
    goToNotation() {
      this.$router.push({ name: 'Notation' })
    },
    goToKnowledge() {
      this.$router.push({ name: 'Knowledge' })
    },
    goToNotationDetail(notation) {
    console.log(notation.notation_id);
    sessionStorage.setItem('notation_id', notation.notation_id);
    this.$router.push({ path: '/notation/' + notation.notation_id });
  },
  goToKnowledgeDetail(detail) {
    console.log(detail.notation_id);
    sessionStorage.setItem('theory_knowledge_id', detail.theory_knowledge_id);
    this.$router.push({ path: '/knowledge/' + detail.theory_knowledge_id });
  },
    fetchHotNotations() {
    fetch('http://localhost:8080/v1/notation/hot') // 获取按浏览量排序的乐谱
      .then(response => response.json()) 
      .then(data => {
        this.notations = data;
      })
      .catch(error => console.error('Error fetching notations:', error));
  },
  fetchHotKnowledges() {  
      fetch('http://localhost:8080/v1/tk/hot')  
        .then(response => response.json())  
        .then(data => {  
          this.details = data;  
        })  
        .catch(error => console.error('Error fetching details:', error));  
    }, 
},
  created() {
    this.fetchHotNotations(); // 组件创建时调用fetchHotNotations方法,得到热门乐谱信息
    this.fetchHotKnowledges();// 组件创建时调用fetchHotKnowledges方法,得到热门乐理知识信息
  
  }
};  
</script>  

<style scoped>  
body {  
  font-family: 'KaiTi', KaiTi, '楷体', serif;  
  background-color: #f5f5f5;  
  color: #333;  
  margin: 0;  
  padding: 0;  
}  


h1 {  
  margin: 0;  
  font-size: 2.5em;  
}  

main {  
  padding: 20px;
  margin-left:60px;
  margin-right: 60px; 
}  


.row {  
  display: flex;  
  justify-content: space-between;  
  margin-bottom: 20px;  
}  

.banner {  
  background-color: #ffffff;
  padding: 15px;
  border-radius: 8px;
  flex: 2;
  margin-bottom: 30px; /* 增加轮播图与下方内容的间距 */
}  

.music-notation,  
.music-study {  
  background-color: #ffffff;
  padding: 15px;
  border-radius: 8px;
  flex: 1;
  margin-top: 30px; /* 可选：确保上下内容有一致的间距 */  
}  
.notation-header {  
  display: flex;  
  justify-content: space-between;  
  align-items: center;  
  border-bottom: 2px solid #ddd;  /* 保留下方的线 */
  padding-bottom: 5px; /* 调整间距 */
}  

.notation-header h2 {  
  margin: 0;  
  font-size: 1.8em;  
  border-bottom: none;  
}  
.banner:last-child,  
.music-notation:last-child,  
.music-culture:last-child {  
  margin-right: 0;  
}  

.banner-content {  
  position: relative;  
  font-size: 1.5em;  
}   

.music-notation h2,  
.music-study h2 {  
  font-size: 1.8em;  
  border-bottom: 2px solid #d7bc34;  
  padding-bottom: 10px;  
}  

.card-container {  
  display: flex;  
  flex-wrap: wrap;  
  gap: 10px; /* 调整为较小的间距 */  
  justify-content: space-between;  
  display: flex; 
}  

.card {  
  background-color: #f9f9f9;  
  padding: 0;  
  border-radius: 8px;  
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);  
  flex: 0 1 calc(20% - 10px); /* 每个卡片占 20% 的宽度，减去间距 */  
  min-width: 160px;  
  max-width: 180px;  
  display: flex;  
  flex-direction: column; /* 让图片显示在上面，文字显示在下面 */  
  align-items: center; /* 居中对齐图片和文字 */  
  
}  

.card h3 {  
  font-size: 1.4em;  
  color:  #d7bc34;  
;  
}  

.card p {  
  font-size: 1em;  
  color: #666;  
}  

.see-more {  
  text-decoration: none; /* 去除下划线 */
  background-color: #cbc396; /* 设置为黄色 */
  color: black;
  border: none;
  border-radius: 30px;
  padding: 5px 10px; /* 减小padding来缩小按钮 */
  cursor: pointer;
  font-size: 1em; /* 减小字体大小 */
  display: block;
  margin: 20px auto; /* Center the button */
  transition: all 0.3s ease-in-out; /* Smooth hover transition */
}  

.see-more:hover {  
  background-color: #cbc396; /* 设置悬停时稍深的黄色 */
  transform: scale(1.05); /* Slightly grow the button on hover */
}  

router-link {  
  text-decoration: none; /* 去除链接下划线 */  
} 

.notation-header {  
  display: flex;  
  justify-content: space-between;  
  align-items: center;  
  border-bottom: 2px solid #ddd;  /* 保留下方的线 */
  padding-bottom: 5px; /* 调整间距 */
}   
.card-image {  
  width: 100%;  
  height: 180px;  
  overflow: hidden;  
  flex-shrink: 0;  

}

.notation-image {  
  width: 100%;  
  height: 100%;  
  object-fit: cover;  
}

.card-content {  
  padding: 10px;  
  display: flex;  
  flex-direction: column;  
  justify-content: center;  
  text-align: center;  
}

.card h3 {  
  font-size: 1.2em;
  color: #384538;
  border-bottom: none; /* 去除下划线 */
}

.card p {  
  font-size: 1em;  
  color: #666;  
}  

.see-more {  
  background: linear-gradient(145deg, #eae1b0, #eaeae4);  
  color: rgb(0, 0, 0);  
  border: none;  
  border-radius: 30px;  
  padding: 10px 20px;  
  cursor: pointer;  
  font-size: 1.1em;  
  transition: all 0.3s ease-in-out;  
}  

.see-more:hover {  
  background-color: #d7bc34;  
  transform: scale(1.05);  
}

router-link {  
  text-decoration: none !important;  
}

footer {  
  text-align: center;  
  padding: 10px;  
  background-color: #d7bc34;  
  color: white;  
  position: relative;  
  bottom: 0;  
  width: 100%;  
}  

.more-notations, .more-knowledges {
  color: #333 !important; /* 使用 !important 确保样式被应用 */
  text-decoration: none !important;
  font-size: 16px; /* 字体大小 */
  color: #333; /* 字体颜色 */
  text-decoration: none; /* 去除下划线 */
  transition: color 0.3s ease; /* 颜色变化的过渡效果 */
}

</style>